<template>
	<div class="product-detail">
		<div class="detail-hd" v-if="dataList.product">
			<span id="back-icon" class="back-icon" @click="back"></span>
			<strong>{{dataList.product.pName}}</strong>
			<span id="cart-icon" class="cart-icon" @click="toCart"></span>
		</div>
		<div class="detail-content" v-if="dataList.product" v-scrollo>
			<appbar></appbar>
			<product-banner></product-banner>
			<p class="detail-name">{{dataList.product.pName}}</p>
			<div class="line"></div>
			<p class="detail-price">
				￥{{dataList.product.price}}
			</p>
			<p class="detail-market-price">
				市场价:￥{{dataList.product.market_price}}
			</p>
			<div class="item-promise">
				<small>正品保证</small>
				<small>全国保修</small>
				<small>7天包退换</small>
				<strong>详情>></strong>
			</div>
			<div class="line"></div>
			<!-- <div class="pinfo" v-html="dataList.product.pIntro">
			</div> -->
			<div class="item-tab">
				<span>商品介绍</span>
				<span>参数规格</span>
			</div>
			<div class="item-img">
				<img v-for="i in dataList.product.introImage" v-lazy="i">
			</div>
		</div>
		<div class="detail-footer">
			<span class="home-icon">首页</span>
			<span class="add-cart" @click="addcart(dataList.product)">加入购物车</span>
			<span class="now-buy">立即购买</span>
		</div>
		<div class="add-success" v-if="statu">
			加入购物车成功
		</div>
	</div>
</template>



<style>
	.product-detail{
		width: 100%;
		position: absolute;
		top: 0;
		bottom: -1.2rem;
		background: #fff;
		z-index: 10;
	}
	.detail-hd{
		width: 100%;
		height: 1.12rem;
		position: absolute;
		top: 1.333333rem;
		background: rgba(240,240,240,0);
		z-index: 10;
		display: flex;
		justify-content: space-between;
		text-align: center;
		color: rgba(0,0,0,0);
	}
	.details-hd-active{
		width: 100%;
		height: 1.12rem;
		position: absolute;
		display: flex;
		justify-content: space-between;
		text-align: center;
		transition: 0.5s;
		transform: translate3d(0px, 0, 0px);
		background: rgb(240,240,240);
		z-index: 100;
		font-size: 0.426667rem;
	}
	.detail-content{
		position: absolute;
		width: 100%;
		top: 0;
		bottom: 0;
		overflow: auto;
	}
	.back-icon{
		display: inline-block;
		width: 0.853333rem;
		height: 0.853333rem;
		border-radius: 50%;
		background: url('http://wx.yngmall.com/h5/src/assets/imgs/icon_back_gray.png') rgba(0,0,0,0.7) center no-repeat;
		background-size: 80%;
		margin: 0.133333rem 0 0 0.266667rem;
	}
	.back-icon-next{
		width: 0.853333rem;
		height: 0.853333rem;
		border-radius: 50%;
		background: url('http://wx.yngmall.com/h5/src/assets/imgs/icon_back_gray.png')  center no-repeat;
		background-size: 80%;
		margin: 0.133333rem 0 0 0.266667rem;
	}
	.details-hd-active strong,.detail-hd strong{
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		width: 70%;
		font-size: 0.426667rem;
		margin: 0.266667rem 0 0 0;
	}
	.cart-icon{
		width: 0.853333rem;
		height: 0.853333rem;
		border-radius: 50%;
		background: url('') rgba(0,0,0,0.7) center no-repeat;
		background-size: 80%;
		margin: 0.133333rem 0.266667rem 0 0;	
	}
	.cart-icon-next{
		width: 0.853333rem;
		height: 0.853333rem;
		border-radius: 50%;
		background: url('') center no-repeat;
		background-size: 80%;
		margin: 0.133333rem 0.266667rem 0 0;
	}
	.detail-name{
		font-size: 0.426667rem;
		margin-left: 0.266667rem;
	}
	.detail-price{
		font-size: 0.48rem;
		color: #ff3d00;
		line-height: 0.746667rem;
		padding-left: 0.266667rem;
	}
	.detail-market-price{
		font-size: 0.32rem;
		color: #999;
		text-decoration: line-through;
		line-height: 0.586667rem;
		padding-left: 0.4rem;
	}
	.item-promise{
		height: 0.96rem;
		padding-left: 0.266667rem;
		background: #f7f7f7;
		line-height: 0.96rem;
	}
	.item-promise small{
		font-size: 0.32rem;
		color: #999;
		padding-left: 0.453333rem;
		background: url(../../../assets/fonts/gou.png) left center no-repeat;
		background-size: auto 100%;
	}
	.item-promise strong{
		float: right;
		margin-right: 0.533333rem;
	}
	.pinfo table{
		width: 10.0rem;
		font-size: 0.533333rem;
	}
	.item-tab{
		display: flex;
	}
	.item-tab span{
		width: 50%;
		height: 1.066667rem;
		line-height: 1.066667rem;
		text-align: center;
		font-size: 0.426667rem;
		position: relative;
	}
	.item-tab span:first-child:after{
		content: '';
		width: 1px;
		height: 80%;
		background: #999;
		position: absolute;
		right: 0;
		top: 10%;
	}
	.item-img img{
		width: 100%;
	}
	.detail-footer{
		width: 100%;
		position: absolute;
		bottom: 0;
		background: #fff;
		display: flex;
	}
	.detail-footer span{
		height: 1.2rem;
	}
	.home-icon{
		width: 16%;
		background: url('http://wx.yngmall.com/h5/src/assets/imgs/icon_item_top_home.png') #eee center 0.053333rem no-repeat;
		background-size: 45% auto;
		padding: 0.666667rem 0 0 0;
		box-sizing: border-box;
		text-align: center;
	}
	.add-cart,.now-buy{
		width: 42%;
		text-align: center;
		line-height: 1.2rem;
		color: #fff;
		font-size: 0.426667rem;
	}
	.add-cart{
		background: #f18d00;
	}
	.now-buy{
		background: #ff3d00;
	}
	.add-success{
		width: 40%;
		height: 1.066667rem;
		border-radius: 0.533333rem;
		text-align: center;
		line-height: 1.066667rem;
		color: #fff;
		background: rgba(0,0,0,0.7);
		position: absolute;
		bottom: 10%;
		z-index: 100;
		left: 30%;
		font-size: 0.373333rem;
	}
</style>


<script>
import appbar from '../home/appBar.vue';
import productBanner from './product-banner.vue';
	export default{
		data(){
			return {
				dataList: [],
				data:0,
				statu: false
			}
		},
		components: {
			appbar,productBanner
		},
		methods: {
			request(){
				this.data = this.$store.state.productDetailData.data;
				// var that = this.$store.state.productDetailData.id;
				var that = this.$route.query.id;
				this.$http({
					url: 'http://www.yngmall.com/json/product_demo.ashx?',
					method: 'get',
					params: {
						id: that,
						sellerId: 428757
					}
				})
				.then(function(res){
					res.body.product.num = 1;
					res.body.product.status = false;
					this.dataList = res.body;
				})
			},
			back(){
				window.history.go(-1);
			},
			toCart(){
				this.$router.push({path: '/cart'});
			},
			addcart(data){
				clearTimeout(time);
				this.$store.commit('addCart',data);
				this.statu = true;
				var that = this;
				var time = setTimeout(function(){
					that.statu = false;
				},2000)
			}
		},
		mounted(){
			this.request();
		}
	}
</script>